import React, { useEffect, useState } from 'react'
import { Modal, Form, Input, message, Button } from 'antd'
import axios from 'axios'
import base from '../../routes/baseUrl'

export default function Home() {

  const [isModalVisible, setIsModalVisible] = useState(false)
  const [form] = Form.useForm()
  const token = JSON.parse(sessionStorage.getItem('token'))
  const { id, userType, password, changePassword } = JSON.parse(sessionStorage.getItem('token'))

  useEffect(() => {
    if (!changePassword) {
      setIsModalVisible(true)
    }
  }, [changePassword])

  const handleOk = () => { // 修改密码按钮的回调
    form.validateFields().then(values => {
      const { passwordNew, passwordConfirm } = values
      if (passwordNew === password) {
        message.error(`新密码不能为${userType === 1 ? '学号' : '工号'}！`)
      } else if (passwordNew !== passwordConfirm) {
        message.error('两次输入的新密码不一致！')
      } else {
        axios.patch(base + `/${userType === 1 ? 'student' : 'teacher'}s/${id}`, { password: passwordNew }).then(res => {
          sessionStorage.setItem('token', JSON.stringify({...res.data, changePassword: true}))
          message.success('修改成功')
          setIsModalVisible(false)
          form.resetFields()
        }).catch(reason => {
          console.log('修改发生错误', reason)
          message.error('发生错误，请检查网络环境！')
        })
      }
    }).catch(info => {
      console.log('发生错误', info)
    })
  }

  return (
    <div>
      <div>
        <img src="./assets/nefu_logo.webp" alt="nefu" style={{width: '50%'}} />
        <h2>欢迎使用东北林业大学毕设选导师系统！😀</h2>
        <h2>首次登录建议修改密码</h2>
        <h3>学生用户</h3>
        <ul>
          <li><h3>点击“导师列表”进行导师选择，选择成功后将自动跳转至“我的导师”</h3></li>
          <li><h3><Button>选择</Button>&nbsp;按钮不可用，说明该导师已经选满</h3></li>
          <li>在“我的导师”页面进行&nbsp;<Button type='danger'>退选</Button>&nbsp;，退选后只能重新选导师</li>
        </ul>
        <h3>教师用户</h3>
        <ul>
          <li><h3>点击“学生列表”可查看已选自己的学生</h3></li>
          <li><h3>点击&nbsp;<Button type='danger'>退选</Button>&nbsp;按钮可以将某一学生退选</h3></li>
        </ul>
      </div>
      <Modal
        title='修改密码'
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={() => {
          console.log('操作取消')
          setIsModalVisible(false)
          sessionStorage.setItem('token', JSON.stringify({...token, changePassword: true}))
        }}
        okText='修改'
        cancelText='忽略'
      >
        <Form
          name="修改密码"
          form={form}
          layout='vertical'
          autoComplete="off"
        >
          <Form.Item>
            <p>当前密码与{userType === 1 ? '学号' : '工号'}相同，请修改密码</p>
          </Form.Item>
          <Form.Item
            label="新密码"
            name="passwordNew"
            rules={[
              {
                required: true,
                message: '请输入新密码！',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认新密码"
            name="passwordConfirm"
            rules={[
              {
                required: true,
                message: '请确认新密码！',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
